<template>
	<view class="page">
		<free-nav-bar showback showright="true" title="选择">

			<view slot="right" class="main-bg-color rounded mr-3 px-2 py-1">
				<text class="font text-white" @click="handleBar">{{multiselect ? `发送(${selectNum})`:'多选'}}</text>


			</view>
		</free-nav-bar>
		<view class="p-3 bg-light position-fixed left-0 right-0" :style="'top:'+top+'px'">
			<input type="text" v-model="key" placeholder="请输入" class="bg-white rounded" placeholder-class="text-center"
				style="height: 80rpx;" @input="inputuser">

		</view>
		<view class="" style="height: 140rpx;">

		</view>
		<free-list-item title="更多联系人">



		</free-list-item>
		<view class="px-2 py-1">
			<text class="text-muted font-sm">最近联系人</text>
		</view>
		<free-list-item :title="item.username" v-for="item,index in list" v-if="key== ''" cover="/static/images/mail/friend.png"
			:showright="true">

			<view class="border rounded-circle flex align-center justify-center" slot="right"
				style="width: 40rpx;height: 40rpx; " @click="mulclick(index)" v-if="multiselect">
				<view class="main-bg-color rounded-circle" v-if="item.checked == true"
					style="width: 30rpx;height: 30rpx;">

				</view>
			</view>

		</free-list-item>
		
		<free-list-item :title="item.username" v-for="item,index in searchlist" v-if="key!== ''" cover="/static/images/mail/friend.png"
			:showright="true">
		
			<view class="border rounded-circle flex align-center justify-center" slot="right"
				style="width: 40rpx;height: 40rpx; " @click="mulclick(index)" v-if="multiselect">
				<view class="main-bg-color rounded-circle" v-if="item.checked == true"
					style="width: 30rpx;height: 30rpx;">
		
				</view>
			</view>
		
		</free-list-item>
		
		<free-popup maskColor ref="confirmpopup" :center="true">
			<view class="bg-white rounded flex flex-column" style="width: 600rpx;">
				<view class="p-4 flex flex-column">
					<text class="font-md font-weight-bold mb-3">发送给：</text>
					<scroll-view scroll-x="true"  class="flex">
						<view>
							<free-avater src="https://profile-avatar.csdnimg.cn/3365568353cd44c2acf217ab8b6345f9_weixin_47365777.jpg!1"></free-avater>
						</view>
					</scroll-view>
					<view class="my-3 bg-light rounded p-2">
						<text class="font text-light-muted">[个人名片]昵称</text>
						
						
					</view>
					<input type="text" placeholder="给朋友留言" class="border-bottom" style="height: 60rpx;">
				</view>
				<view class="border-top flex align-stretch" style="height: 100rpx;" >
					<view @click="submit()" class="flex-1 border-right flex align-center justify-center">
						<text>取消</text>
					</view>
					<view @click="submit()" class="flex-1 flex align-center justify-center">
			<text>发送</text>
						
					</view>
				</view>
			</view>
		</free-popup>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeListItem from "@/components/free-ui/free-list-item.vue"
	import freePopup from "@/components/free-ui/free-popup.vue"
	import freeAvater from "@/components/free-ui/free-avater.vue"
	import {mapState} from "vuex"
	export default {
		components: {
			freeNavBar,
			freeListItem,
			freeAvater,
			freePopup
		},
		data() {
			return {
				top: 0,
				key: "",
				multiselect: false,
				scrollHeight: 0,
				checknum: 0,
				scrollinto:"",
				list:[]
			}
		},
		computed: {
			...mapState({
				// list:state=>state.user.mailList
			}),
			searchlist() {
				console.log(this.list,"list");
				// return this.list.filter(item =>
				// 	item.name.indexOf(this.key)!==-1
				// )
			},
			selectList() {
				return this.list.filter(item =>
					item.checked === true
				)
			},
			selectNum() {
				return this.selectList.length
			},
			
			
		},
		onLoad() {
			
			let res = uni.getSystemInfoSync();
			this.top = res.statusBarHeight + uni.upx2px(30)
	
		this.scrollHeight = res.windowHeight - this.top
		},
		methods: {
			inputuser() {
				
				console.log(this.searchlist, "sea");
			},
			submit(){
					this.$refs.confirmpopup.hidden()
			},
			mulclick(index) {

				console.log(this.checknum, "cvh");


				if (this.selectNum == 9 && !this.list[index].checked) {
					uni.showToast({
						title: "最多只能选择9个联系人",
						icon: "none"
					})

				} else {
					this.list[index].checked = !this.list[index].checked;

				}



				console.log(this.selectList, "thisselect");
			},
			handleBar() {
				if (!this.multiselect) {
					return this.multiselect = true
				}else{
					this.$refs.confirmpopup.show()
				}
			},
		}
	}
</script>

<style>

</style>
